<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery/jquery-1.12.4.js"></script>
    <script src="../Vue/Vue.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        body {
            background-color: #f3f5f7;
        }

        .xcjy {
            width: 100%;
            margin: 0 auto;
        }

        .top {
            width: 85%;
            height: 60px;
            margin: 0 auto;

            position: relative;
        }

        .top div:nth-child(1) {
            width: 195px;
            height: 40px;
            margin-top: 10px;
            float: left;
            background-image: url("xc-imgs/学成在线.png");
        }

        .top2 {
            position: absolute;
            height: 60px;
            width: 160px;
            display: inline-block;
            float: left;
            line-height: 60px;
            margin: 0 30px;

        }

        .top2 a {
            color: #050505;
        }

        .top li {

            float: left;
        }

        .top li:nth-child(1) {
            width: 40px;
        }

        .top li:nth-child(2) {
            width: 40px;
        }

        .top li:nth-child(3) {
            width: 80px;
        }

        .top div:nth-child(3) {
            width: 117px;
            height: 30px;
            background-image: url("xc-imgs/头像.png");
            float: right;
            margin: 15px 20px;
        }

        .top div:nth-child(4) {
            width: 14px;
            height: 16px;
            float: right;
            margin: 23px 10px;
            background-image: url("xc-imgs/提醒.png");
        }

        .top div:nth-child(5) {
            width: 80px;
            height: 60px;
            line-height: 60px;
            float: right;
        }

        .top div:nth-child(6) {
            width: 200px;
            height: 60px;
            float: right;
            line-height: 30px;
        }

        .top6 input {
            width: 150px;
            height: 26px;
            float: left;
            margin: 17px 0;

        }

        .top6 div {
            display: inline-block;
            width: 30px;
            height: 30px;
            float: left;
            margin: 17px 0;
            background-color: blue;
        }

        .top6 span {
            width: 30px;
            height: 30px;
            color: white;
            display: inline-block;
            text-align: center;
        }

        .lunbo {
            width: 100%;
            height: 420px;
            background-image: url("xc-imgs/top背景图.png");
        }

        .lb {
            width: 1200px;
            height: 420px;
            margin: 0 auto;
        }

        .lb-left {
            position: relative;
            width: 190px;
            height: 420px;
            color: white;
            float: left;
            background-color: #13024b;
        }

        .lb ul {
            position: absolute;
            width: 180px;
            height: 420px;
            margin: 21px 5px;

        }

        .lb-left li {
            width: 180px;
            height: 42px;
        }

        a {
            color: white;
        }

        .lb a {
            float: left;
            margin-left: 20px;
        }

        .lb span {
            float: right;
            margin-right: 20px;
        }

        .lb-right {
            width: 230px;
            height: 300px;
            float: right;

        }

        .lb-center {
            float: left;
        }

        .lb-right ul {
            width: 230px;
            height: 300px;
        }

        .lb-right li {
            text-align: center;
            width: 230px;
            height: 60px;

            line-height: 60px;
        }

        .lb-right li:nth-child(1) {
            color: white;
            background-color: olivedrab;
        }

        /*-----------------------------------------------------------------*/
        .tj {
            width: 1200px;
            height: 70px;
            margin: 0 auto;
            background-color: #ffffff;

        }

        .tj ul {
            width: 1200px;
            height: 70px;

        }

        .tj li {
            width: 90px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            float: left;
            margin: 0 10px;
        }

        .tj li:nth-child(8) {
            float: right;
        }

        .tj a {
            color: black;
            float: left;
        }

        .tj span {
            color: #dddddd;
            float: right;
        }

        #a1 {
            color: blue;
        }

        #a2 {
            color: blue;
        }

        .dh1 {
            width: 1200px;
            margin: 0 auto;
        }

        .jptj {
            width: 1200px;
            height: 50px;
            line-height: 50px;
        }

        .jptj span {
            float: right;
        }

        .dh1 { /*------------------dh1------------------*/

        }

        .up1 {
            display: flex;
            width: 1200px;
            height: 270px;
            justify-content: space-between;
        }

        .tp1 {
            width: 228px;
            height: 270px;
            background-position: center;
            background-image: url("xc-imgs/App.png");
        }

        .tp2 {

            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/App.png");
        }

        .tp3 {

            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Kani2.png");
        }

        .tp4 {

            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/微软人工智能.png");
        }

        .tp5 {

            width: 228px;
            height: 270px;
            background-position: center;
            background-image: url("xc-imgs/App.png");
        }

        .tp1 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp1 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp2 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp2 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp3 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp3 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp4 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp4 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp5 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp5 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .down1 {
            display: flex;
            width: 1200px;
            height: 270px;
            margin: 20px 0;
            justify-content: space-between;
        }

        .tp6 {

            width: 230px;
            height: 270px;
            background-position: center;
            background-image: url("xc-imgs/App.png");
        }

        .tp7 {

            width: 230px;
            height: 270px;
            background-image: url("xc-imgs/App.png");
        }

        .tp8 {

            width: 230px;
            height: 270px;
            background-image: url("xc-imgs/Kani2.png");
        }

        .tp9 {

            width: 230px;
            height: 270px;
            background-image: url("xc-imgs/微软人工智能.png");
        }

        .tp10 {

            width: 230px;
            height: 270px;
            background-position: center;
            background-image: url("xc-imgs/App.png");
        }

        .tp6 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp6 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp7 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp7 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp8 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp8 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp9 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp9 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .tp10 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .tp10 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh2-top { /*------------------dh2------------------*/
            width: 1200px;
            height: 84px;
            margin: 0 auto;
        }

        .dh2-top1 {
            width: 64px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh2-top2 {
            width: 1072px;
            height: 84px;
            text-align: center;
            line-height: 84px;
            float: left;
        }

        .dh2-top3 {
            width: 64px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh2-top2 span {
            margin: 0 50px;
        }

        .dh2-bottom {
            width: 1200px;
            height: 392px;
            margin: 0 auto;
        }

        .dh2-left {
            width: 228px;
            height: 392px;
            float: left;
            background-image: url("xc-imgs/php入门背景.png");
        }

        .dh2-right {
            width: 957px;
            height: 392px;
            float: right;
        }

        .dh2-up {
            width: 957px;
            height: 100px;
            background-image: url("xc-imgs/python.png");
        }

        .dh2-down {
            display: flex;
            width: 957px;
            height: 270px;
            margin-top: 22px;
            justify-content: space-between;
        }

        .dh2-down1 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/App.png");
        }

        .dh2-down2 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/App.png");
        }

        .dh2-down3 {
            width: 228px;
            height: 270px;

            background-image: url("xc-imgs/App.png");
        }

        .dh2-down4 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/App.png");
        }

        .dh2-down1 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh2-down1 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh2-down2 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh2-down2 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh2-down3 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh2-down3 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh2-down4 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh2-down4 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh3-top { /*------------------dh3------------------*/
            width: 1200px;
            height: 84px;
            margin: 0 auto;
        }

        .dh3-top1 {
            width: 80px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh3-top2 {
            width: 1056px;
            height: 84px;
            text-align: center;
            line-height: 84px;
            float: left;
        }

        .dh3-top3 {
            width: 64px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh3-top2 span {
            margin: 0 50px;
        }

        .dh3-bottom {

            width: 1200px;
            height: 392px;
            margin: 0 auto;
        }

        .dh3-left {
            width: 228px;
            height: 392px;
            float: left;
            background-image: url("xc-imgs/php入门背景2.png");
        }

        .dh3-right {
            width: 957px;
            height: 392px;
            float: right;
        }

        .dh3-up {
            width: 957px;
            height: 100px;
            background-image: url("xc-imgs/人工智能.png");
        }

        .dh3-down {
            display: flex;
            width: 957px;
            height: 270px;
            margin-top: 22px;
            justify-content: space-between;
        }

        .dh3-down1 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Cocos2d-x.png");
        }

        .dh3-down2 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Cocos2d-x.png");
        }

        .dh3-down3 {
            width: 228px;
            height: 270px;

            background-image: url("xc-imgs/Cocos2d-x.png");
        }

        .dh3-down4 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Cocos2d-x.png");
        }

        .dh3-down1 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh3-down1 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh3-down2 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh3-down2 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh3-down3 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh3-down3 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh3-down4 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh3-down4 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh4 { /*------------------dh4------------------*/
            width: 1200px;
            margin: 0 auto;
        }

        .dh4-top {
            width: 1200px;
            height: 84px;
        }

        .dh4-top1 {
            width: 112px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh4-top2 {
            width: 1024px;
            height: 84px;
            text-align: center;
            line-height: 84px;
            float: left;
        }

        .dh4-top3 {
            width: 64px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh4-top2 span {
            margin: 0 50px;
        }

        .dh4-down {
            display: flex;
            width: 1200px;
            height: 270px;
            justify-content: space-between;
        }

        .dh4-down1 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Angular.png");
        }

        .dh4-down2 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Angular.png");
        }

        .dh4-down3 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Angular.png");
        }

        .dh4-down4 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Angular.png");
        }

        .dh4-down5 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/Angular.png");
        }

        .dh4-down1 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh4-down1 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh4-down2 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh4-down2 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh4-down3 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh4-down3 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh4-down4 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh4-down4 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh4-down5 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh4-down5 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh5 { /*------------------dh5------------------*/
            width: 1200px;
            margin: 0 auto;
        }

        .dh5-top {
            width: 1200px;
            height: 84px;
        }

        .dh5-top1 {
            width: 112px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh5-top2 {
            width: 1024px;
            height: 84px;
            text-align: center;
            line-height: 84px;
            float: left;
        }

        .dh5-top3 {
            width: 64px;
            height: 84px;
            line-height: 84px;
            float: left;
        }

        .dh5-top2 span {
            margin: 0 50px;
        }

        .dh5-down {
            display: flex;
            width: 1200px;
            height: 270px;
            justify-content: space-between;
        }

        .dh5-down1 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/UGUI.png");
        }

        .dh5-down2 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/UGUI.png");
        }

        .dh5-down3 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/UGUI.png");
        }

        .dh5-down4 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/UGUI.png");
        }

        .dh5-down5 {
            width: 228px;
            height: 270px;
            background-image: url("xc-imgs/UGUI.png");
        }

        .dh5-down1 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh5-down1 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh5-down2 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh5-down2 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh5-down3 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh5-down3 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh5-down4 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh5-down4 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        .dh5-down5 div:nth-child(1) {
            margin: 180px 0 0 15px;
        }

        .dh5-down5 div:nth-child(2) {
            margin: 20px 0 0 15px;
        }

        /*-----------------------------------------------------------------*/
        .bottom {
            width: 1903px;
            background-color: #ffffff;
        }

        .bot {
            width: 1200px;
            height: 280px;
            margin: 30px auto;

        }

        .btm1 {
            position: relative;
            width: 500px;
            height: 380px;
            float: left;

        }

        .btm1 div:nth-child(1) {
            width: 195px;
            height: 40px;
            margin: 20px 10px;
            background-image: url("xc-imgs/学成在线.png");
        }

        .btm1 div:nth-child(2) {

        }

        .btm1 div:nth-child(3) {
            width: 120px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border: 1px solid blue;
            margin: 20px 10px;
        }

        .btm2 {
            width: 100px;
            height: 100px;
            float: right;
            margin: 20px 20px;
            text-align: center;

        }

        .btm2 li {
            width: 100px;
            height: 33px;
        }

        .btm2 li:nth-child(1) {
            font-size: 18px;
            font-weight: 600;
        }

        .btm3 {
            float: right;
            width: 150px;
            height: 180px;
            margin: 20px 50px;

        }

        .btm3 li {
            width: 150px;
            height: 30px;
            line-height: 30px;
        }

        .btm3 li:nth-child(1) {
            font-size: 18px;
            font-weight: 600;
        }

        .btm4 {
            float: right;
            width: 150px;
            height: 180px;
            margin: 20px 50px;
        }

        .btm4 li {
            width: 150px;
            height: 30px;
            line-height: 30px;
        }

        .btm4 li:nth-child(1) {
            font-size: 18px;
            font-weight: 600;
        }

    </style>
</head>
<body>
<div id="xc">
    <div class="xcjy">


            <!------------------搜索栏------------------------>
            <!-- <input type="text">
             <div><span class="fa fa-search"></span></div>-->

            <searchs></searchs><!------------------top------------------------>


        <div class="lunbo">
            <div class="lb">

                <lbdh></lbdh><!------------------轮播栏导航------------------------>

                <div class="lb-center"></div>

                <lbright></lbright><!------------------轮播栏导航right------------------------>

            </div>
        </div>
        <div class="body">
            <div class="tj">
                <ul>
                    <li><a id="a1" href="#">精品推荐</a><span></span></li>
                    <li><a href="#">JQuery</a><span>|</span></li>
                    <li><a href="#">Spark</a><span>|</span></li>
                    <li><a href="#">MySQL</a><span>|</span></li>
                    <li><a href="#">JavaWeb</a><span>|</span></li>
                    <li><a href="#">C++</a><span>|</span></li>
                    <li><a href="#">C#</a><span>|</span></li>
                    <li><a id="a2" href="#">修改兴趣</a><span></span></li>
                </ul>
            </div>
            <div class="dh1">
                <div class="jptj">精品推荐<span>查看全部</span></div>
                <div class="tpbj1">
                    <div class="up1">
                        <div class="tp1">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp2">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp3">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp4">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp5">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                    </div>
                    <div class="down1">
                        <div class="tp6">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp7">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp8">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp9">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                        <div class="tp10">
                            <div> Think PHP 5.0 博客系统实战项目演练</div>
                            <div><span>高级</span><i></i><span>1125人在学习</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dh2">
                <div class="dh2-top">
                    <div class="dh2-top1">编程入门</div>
                    <div class="dh2-top2">
                        <span>热门</span>
                        <span>初级</span>
                        <span>中级</span>
                        <span>高级</span>
                    </div>
                    <div class="dh2-top3">查看全部</div>
                </div>
                <div class="dh2-bottom">
                    <div class="dh2-left"></div>
                    <div class="dh2-right">
                        <div class="dh2-up"></div>
                        <div class="dh2-down">
                            <div class="dh2-down1">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                            <div class="dh2-down2">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                            <div class="dh2-down3">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                            <div class="dh2-down4">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dh3">
                <div class="dh3-top">
                    <div class="dh3-top1">数据分析师</div>
                    <div class="dh3-top2">
                        <span>热门</span>
                        <span>初级</span>
                        <span>中级</span>
                        <span>高级</span>
                    </div>
                    <div class="dh3-top3">查看全部</div>
                </div>
                <div class="dh3-bottom">
                    <div class="dh3-left"></div>
                    <div class="dh3-right">
                        <div class="dh3-up"></div>
                        <div class="dh3-down">
                            <div class="dh3-down1">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                            <div class="dh3-down2">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                            <div class="dh3-down3">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                            <div class="dh3-down4">
                                <div> Think PHP 5.0 博客系统实战项目演练</div>
                                <div><span>高级</span><i></i><span>1125人在学习</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dh4">
                <div class="dh4-top">
                    <div class="dh4-top1">机器学习工程师</div>
                    <div class="dh4-top2">
                        <span>热门</span>
                        <span>初级</span>
                        <span>中级</span>
                        <span>高级</span>
                    </div>
                    <div class="dh4-top3">查看全部</div>
                </div>
                <div class="dh4-down">
                    <div class="dh4-down1">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh4-down2">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh4-down3">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh4-down4">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh4-down5">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                </div>
            </div>
            <div class="dh5">
                <div class="dh5-top">
                    <div class="dh5-top1">前端开发工程师</div>
                    <div class="dh5-top2">
                        <span>热门</span>
                        <span>初级</span>
                        <span>中级</span>
                        <span>高级</span>
                    </div>
                    <div class="dh5-top3">查看全部</div>
                </div>
                <div class="dh5-down">
                    <div class="dh5-down1">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh5-down2">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh5-down3">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh5-down4">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                    <div class="dh5-down5">
                        <div> Think PHP 5.0 博客系统实战项目演练</div>
                        <div><span>高级</span><i></i><span>1125人在学习</span></div>
                    </div>
                </div>
            </div>
        </div>

        <bottom></bottom><!------------------底部------------------------>

    </div>
    <tempalte id="bottom"><!------------------底部------------------------>
        <div class="bottom">
            <div class="bot">
                <div class="btm1">
                    <div></div>
                    <div>学成在线致力于普及中国最好的教育他与中国一流大学和机构合作</div>
                    <div>下载APP</div>
                </div>
                <div class="btm2">
                    <ul>
                        <li>合作伙伴</li>
                        <li>合作机构</li>
                        <li>合作导师</li>
                    </ul>
                </div>
                <div class="btm3">
                    <ul>
                        <li>新手指南</li>
                        <li>如何注册</li>
                        <li>如何选课</li>
                        <li>如何拿到毕业证</li>
                        <li>学分是什么</li>
                        <li>考试未通过怎么办</li>
                    </ul>
                </div>
                <div class="btm4">
                    <ul>
                        <li>关于学成网</li>
                        <li>关于</li>
                        <li>管理团队</li>
                        <li>工作机会</li>
                        <li>客户服务</li>
                        <li>帮助</li>
                    </ul>
                </div>
            </div>
        </div>
    </tempalte>
</div>
<template id="searchs"><!------------------顶部搜索栏------------------------>
    <div class="top">
        <div class="top1"></div>
        <div class="top2">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="top3"></div>
        <div class="top4"></div>
        <div class="top5">个人中心</div>
        <div class="top6">
            <input type="text">
            <div><span class="fa fa-search"></span></div>
        </div>
    </div>
</template>

<template id="lbdh"><!------------------轮播栏导航------------------------>
    <div class="lb-left">
        <ul>
            <li><a href="#">前端开发</a><span> > </span></li>
            <li><a href="#">后端开发</a><span> > </span></li>
            <li><a href="#">移动开发</a><span> > </span></li>
            <li><a href="#">人工智能</a><span> > </span></li>
            <li><a href="#">商业预测</a><span> > </span></li>
            <li><a href="#">云计算&大数据</a><span> > </span></li>
            <li><a href="#">数据测试</a><span> > </span></li>
            <li><a href="#">UI设计</a><span> > </span></li>
            <li><a href="#">产品</a><span> > </span></li>
        </ul>
    </div>
</template>

<template id="lbright"><!------------------轮播栏导航right------------------------>
    <div class="lb-right">
        <ul>
            <li>我的课程表</li>
            <li>继续学习程序语言设计</li>
            <li>继续学习程序语言设计</li>
            <li>继续学习程序语言设计</li>
            <li>全部课程</li>
        </ul>
    </div>
</template>
<script>
    var searchs = Vue.component("searchs", {//-----------------top------------
        template: "#searchs",
    });
    var lbdh=Vue.component("lbdh",{//----------------轮播栏导航-------------
        template:"#lbdh"
    });
   var lbright=Vue.component("lbright",{//----------------轮播栏导航right----------------------
       template:"#lbright"
   });
   var bottom=Vue.component("bottom",{
       template:"bottom"
   });
    var vue = new Vue({
        el: "#xc",
        data: {

        }
    });
</script>
</body>
</html>